<template>
    <div class="container2_emphasis_firm">

        <el-dropdown size="small" split-button type="primary" class="container2-place" popper-class="dropDownStyle" placement="bottom-start">
            <span style="width: 150px">{{ nameData }}</span>
            <el-dropdown-menu slot="dropdown" class="container2-ulBox userFlex">
                <el-dropdown-item @click.native="handleDropdownItemClick(item)" v-for="(item,index) in videoValue"
                                  :key="index">
                    {{ item.channelName }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div id="Theisen" class="ws-player"></div>
    </div>
</template>

<script>
import {getIntellect} from "@/api/safety/axios";
import PlayerManager from "@/components/iccs/PlayerManager";
import {getPage} from "@/api/consumption/axios";

export default {
    name: "importance6",
    props: {
        // monitorData: Object,
        // selectedFacility: String,
    },
    data() {
        return {
            myPlayer: null,
            //智能高空瞭望
            videoData: '',
            //设备点位
            facilityData: '',
            filteredData: '',
            videoValue: '',
            //视频id
            selectedFacility: null,
            nameData: '',
            playerOptions: {
                controls: true,
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: true, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                techOrder: ["html5"],
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    // {
                    //   type: "application/x-mpegURL", // 类型
                    //   src: "http://videocdn.renrenjiang.cn/Act-ss-m3u8-sd/1037359_1546064640169/1037359_1546064640169.m3u8", // url地址
                    // },
                ],
                poster: "", // 封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: true, // 是否显示全屏按钮
                },
            },

        }
    },
    mounted() {
        //组织接口
        this.getPage()
        //智能高空瞭望
        // this.getIntellect()

    },
    beforeDestroy() {
        this.closeVideo()
    },
    methods: {
        //组织接口
        getPage() {
            // let _this = this
            getPage().then((response) => {
                this.ownerCodes = response.data.pageData[4].orgCode
                // console.log(_this.ownerCodes,'_this.pageDatass')
                this.getIntellect(response.data.pageData[4].orgCode)
            })
        },
        handleDropdownItemClick(item) {
            this.selectedFacility = item.channelCode;
            if (this.myPlayer) {
                this.myPlayer.playRealVideo({
                    channelList: [{
                        id: String(this.selectedFacility), /** 在线的通道id **/
                        // id: '1000047$1$0$0',
                        isOnline: true, /** 设备是否在线，非在线无法播放 **/
                    }],
                    streamType: "1"
                })
            }
            // console.log("点击事件", this.selectedFacility);
        },
        //智能高空瞭望
        getIntellect(ownerCodes) {
            let _this = this
            let params = {
                'pageNum': 1,
                'pageSize': 100,
                // 'ownerCodes': ownerCodes
            }
            getIntellect(params).then((res) => {
                _this.facilityData = res.data[0].data.pageData // 设置为合适的属性值
                const targetKeywords = ["榆树井", "长城煤矿", "长城二矿", "森泰天然气",'盛鲁电厂','富源水务','时达绿能'];
                // 筛选出deviceName包含目标关键词的数据
                this.videoData = this.facilityData.filter(item =>
                    targetKeywords.some(keyword => item.deviceName.includes(keyword))
                );
                this.filteredData = this.videoData.filter(item => item.deviceName.includes("森泰天然气"));
                const mergedChannels =  this.filteredData[0].units.reduce((merged, unit) => {
                    return merged.concat(unit.channels);
                }, []);
                const Keywords = ["内蒙森泰-LNG储罐A顶部", "内蒙森泰-LNG储罐南侧", "内蒙森泰-中控室"];
                // 筛选出deviceName包含目标关键词的数据
                this.videoValue = mergedChannels.filter(item =>
                    Keywords.some(keyword => item.channelName.includes(keyword))
                );
                // 将 selectedFacility 设置为 facilityData 数组的第一项
                if (this.facilityData && this.facilityData.length > 0) {
                    this.selectedFacility = this.facilityData[0].channelCode;
                }
                _this.nameData = this.filteredData[0].deviceName

                _this.getVideo()
            })
        },
        getVideo() {

            this.myPlayer = new PlayerManager({
                el: "Theisen", // 实时预览容器id
                // pztEl: "ws-pan-tilt", // 云台控制容器id
                type: 'real', // real - 实时预览
                maxNum: 1, // 最多显示的窗口
                num: 1, // 初始化显示的窗口
                showControl: true, // 默认是否显示工具栏
                // serverIp: "172.22.12.15", // 代理IP
                streamServerIp: "172.22.12.15", // 流媒体服务 Ip 地址 【如果拉流端口发生改变时，需拼接端口 】
                // proxyServerIp: "http://localhost:85/", // 代理服务器 Ip 地址 【直连模式不传】
                useNginxProxy: false, // 拉流模式 【true-代理模式拉流，false-直连拉流】
                // receiveMessageFromWSPlayer, // 接收来自wsplayer的回调
                /* 下面为播放器返回的回调函数，可以在下面监听各种回调事件 */
                receiveMessageFromWSPlayer: (methods, data) => {
                    switch (methods) {
                        case 'initializationCompleted':
                            // 初始化完成，可调用播放方法（适用于动态加载解码库）
                            // 若回调未触发时就使用实时预览/录像回放，则无法播放。
                            // 此时我们可以调用一个
                            console.log("初始化播放器成功", data);
                            this.myPlayer.playRealVideo({
                                channelList: [{
                                    // id: String(this.selectedFacility), /** 在线的通道id **/
                                    id: String(this.videoValue[0].channelCode),
                                    isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                }],
                                streamType: "1"
                            })
                            break;
                        case "realSuccess": // 实时预览成功
                            console.log("实时预览成功")
                            break;
                        case "realError": // 实时预览失败
                            console.log("实时预览失败")
                            break;
                        case "talkError": // 对讲失败
                            console.log("对讲失败");
                            break;
                        case 'selectWindowChanged': // 选中的窗口发生改变
                            console.log(data, "返回窗口信息")
                            break;
                        case 'windowNumChanged': // 播放器显示的路数发生改变
                            console.log(data, "返回显示的窗口数量")
                            break;
                        case 'closeVideo': // 视频关闭回调
                            // 点击关闭按钮引发的视频关闭进行提示
                            // 切换视频引发的视频关闭不进行提示
                            if (!data.changeVideoFlag) {
                                console.log(`窗口${data.selectIndex}的视频已关闭`)
                            }
                            break;
                        case 'statusChanged': // 视频状态发生改变
                            if (!this.start) {
                                setTimeout(() => {
                                    clearTimeout()
                                    this.myPlayer.playRealVideo({
                                        channelList: [{
                                            id: String(this.videoValue[0].channelCode), /** 在线的通道id **/
                                            isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                        }],
                                        streamType: "1",
                                    })
                                    this.start = true
                                }, 500)
                                window.initPlay = true;
                            }
                            break;
                        case 'errorInfo': // 错误信息汇总
                            console.log(data, "可打印查看错误消息");
                    }
                }
            })
            // const res = getDevicePlayUrl({
            //     id: this.playMonotorId,
            //     streamType: 1
            // })
            // console.log('getVideo', res);
            // console.log("点击事件", this.selectedFacility);
            // if (res?.data?.data) {
            //     this.playerOptions.sources = (res.data.data || []).map(item => ({
            //         type: "application/x-mpegURL",
            //         src: "http://172.22.12.15:7086/live/cameraid/1000048%247/substream/1.m3u8"
            //     }));
            //
            //
            // }

        },
        closeNews() {
            this.$emit('showMonitor', false, '')
        },
        closeVideo() {
            if (this.myPlayer != null) {
                // this.myPlayer.dispose()
                this.myPlayer = null
            }
        },
    }
}
</script>
<style lang="scss">
.height200 {
    width: 570px;
    height: 200px;
    display: flex;
    flex-direction: column;

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-scrollbar__thumb {
        background-color: #189DC5;
    }

    .el-scrollbar__bar {
        &.is-vertical {
            width: 2px; //滚动条宽度
        }
    }
}

.statistical-scrollbar {
    width: 220px;
    height: 130px;
    display: flex;
    flex-direction: column;

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-scrollbar__thumb {
        background-color: #189DC5;
    }

    .el-scrollbar__bar {
        &.is-vertical {
            width: 2px; //滚动条宽度
        }
    }
}

.camera {
    .el-dropdown .el-button-group {
        height: 28px;
        width: 150px;

        .el-button--primary {
            background: rgba(98, 183, 255, 0.2);
            box-shadow: inset 0px 0px 12px 0px #62b7ff;
            border: 1px solid #62b7ff;
        }
    }

    &-ulBox {
        width: 70px;
        height: 50px;
        background: #082048;
        margin-left: 50px;
        box-shadow: inset 0px 0px 12px 0px #62b7ff;
        border: 1px solid #62b7ff;
    }
}

.container2 {
    .el-dropdown .el-button-group {
        .el-button--primary {
            //background: rgba(98, 183, 255, 0.2);
            box-shadow: inset 0px 0px 12px 0px #62b7ff;
            border: 1px solid #62b7ff;
        }
    }

    &-ulBox {
        width: 143px !important;
        height: 50px;
        background: #082048;
        box-shadow: inset 0px 0px 12px 0px #62b7ff;
        border: 1px solid #62b7ff;
    }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }
    .container {
        height: calHeight_2k(28px);

        &-ulBox2 {
            height: calHeight_2k(50px);
        }
    }

    .height200 {
        height: calHeight_2k(200px);

        .el-scrollbar__wrap {
        }

        .el-scrollbar__thumb {
        }

        .el-scrollbar__bar {
            &.is-vertical {
            }
        }
    }

    .statistical-scrollbar {
        height: calHeight_2k(130px);

        .el-scrollbar__wrap {
        }

        .el-scrollbar__thumb {
        }

        .el-scrollbar__bar {
            &.is-vertical {
            }
        }
    }
}

.userFlex {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
</style>
<style scoped lang="scss">
:global(.dropDownStyle .el-dropdown-menu-item) {
    line-height: 36px !important;
    width: 200px !important;
    color: red !important;
    padding: 6px 22px;
}

.ws-player {
    width: 260px;
    height:200px !important;
    margin-top: 10px;
}

.container2 {
    width: 280px;
    height: 200px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_left1.png");
    flex-direction: column;

    &_emphasis {
        width: 260px;
        height: 520px;

        &_firm {
            width: 100%;
            height: 180px;
            margin-top: 10px;
            position: relative;

            &_fontColor {
                font-size: 14px;
                font-family: Noto Sans SC-Medium, Noto Sans SC;
                font-weight: 500;
                color: #00e6ff;
                margin-bottom: 5px;
            }

            &_imgBox {
                width: 100%;
                height: 154px;
                margin-top: 8px;
                background-size: 100% 100%;
                background-image: url("@/assets/bg_pt.png");
            }
        }
    }
}

@media screen and (min-width: 2000px) and (max-width: 3000px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }

    .ws-player {
        height: calHeight_2k(120px);
        margin-top: calHeight_2k(16px);
    }
    .container2 {
        height: calHeight_2k(200px);

        &_emphasis {
            height: calHeight_2k(520px);

            &_firm {
                height: calHeight_2k(180px);
                margin-top: calHeight_2k(10px);

                &_fontColor {
                    margin-bottom: calHeight_2k(5px);
                }

                &_imgBox {
                    height: calHeight_2k(154px);
                    margin-top: calHeight_2k(8px);
                }
            }
        }
    }

}

@media screen and (min-width: 1000px) and (max-width: 1999px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }
    .ws-player {
        height: calHeight_2k(120px);
        margin-top: calHeight_2k(16px);
    }
    .container2 {
        height: calHeight_2k(200px);

        &_emphasis {
            height: calHeight_2k(520px);

            &_firm {
                height: calHeight_2k(180px);
                margin-top: calHeight_2k(10px);

                &_fontColor {
                    margin-bottom: calHeight_2k(5px);
                }

                &_imgBox {
                    height: calHeight_2k(154px);
                    margin-top: calHeight_2k(8px);
                }
            }
        }
    }
}
</style>